<template>
    <div>
       <svg class="svg-class" :class="svgClassName">
        <use :href="svgIcon"></use>
       </svg>
    </div>
</template>

<script setup>
import {ref,computed} from 'vue'

const props=defineProps({
    iconName:{
        type:String,
        default:''
    },
    className:{
        type:String,
        default:''
    },
})
const svgClassName=ref(props.className)
// console.log('svgClassName ',svgClassName);
const svgIcon=computed(()=>`#${props.iconName}`)
</script>

<style lang="scss" scoped>
.svg-class{
    height: 1em;
    width: 1em;
    fill: currentColor;
    vertical-align: middle;
}
</style>